<template>
	<div>
		<el-dialog :title="$t('action.add')" width="70%" class="icon-dialog" :visible.sync="show" @open="open" :before-close="closeForm" append-to-body>
      <el-form  label-width="100px" size="small">
        <el-row>
          <el-col :span="6">
            <el-form-item label="调出仓库" prop="stockNo">
              <el-select v-model="form.stockNo" clearable  placeholder="请选择仓库" @change="getLocation(form.stockNo)" size="small">
                <el-option v-for="item in stockList" :key="item.stockNo" :label="item.stockName" :value="item.stockNo"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="调出仓位" prop="locationNo">
              <el-select v-model="form.locationNo" clearable placeholder="请选择仓位" size="small">
                <el-option v-for="item in locationList" :key="item.locationNo" :label="item.locationName" :value="item.locationNo"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="调入仓库" prop="toStockNo">
              <el-select v-model="form.toStockNo" clearable  placeholder="请选择仓库" @change="getToLocation(form.toStockNo)" size="small">
                <el-option v-for="item in toStockList" :key="item.stockNo" :label="item.stockName" :value="item.stockNo"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="调入仓位" prop="toLocationNo">
              <el-select v-model="form.toLocationNo" clearable  placeholder="请选择仓位" @change="saveAllDetail(form.toLocationNo)" size="small">
                <el-option v-for="item in toLocationList" :key="item.locationNo" :label="item.locationName" :value="item.locationNo"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea"  :rows="2" placeholder="请输入备注" style="width: 310px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-button style="margin-left: 20px; margin-top: -10px" v-if="form.status !== 'audit'" type="success" @click="openShow" size="small">新增物料</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-dialog title="添加物料"  :visible.sync="materialShow" center width="1000px" top="70px" :append-to-body="true" :close-on-press-escape="true" :close-on-click-modal="false">
        <el-row>
          <el-col :span="9" class="col">
            <span style="margin-right: 5px">物料:</span>
            <el-select style="width: 225px" filterable remote size="small" :remote-method="e => getMaterialStockList(e)" v-model="materialNo" clearable class="material" placeholder="请输入5位以上的物料编码/物料名称">
              <el-option v-for="item in this.materialList" :key="item.fnumber" :label="item.fnumber + '：' + item.fname + ' ' + item.fspecification" :value="item.fnumber" />
            </el-select>
          </el-col>
          <el-col :span="6" class="col">
            <span style="margin-left: -15px;margin-right: 10px">批次:</span>
            <el-input style="width: 180px; margin-left: -10px" v-model="batchNo" size="small" clearable></el-input>
          </el-col>
          <el-col :span="3">
            <el-button size="small" @click="getMaterial()">搜索</el-button>
          </el-col>
        </el-row>
        <el-table :data="dataList" v-loading="materialListLoading" class="detail" height="60vh" @selection-change="handleSelectionChange">
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="#" width="40" align="center" type="index"></el-table-column>
          <el-table-column prop="fmaterialNumber" label="物料编码"></el-table-column>
          <el-table-column prop="fmaterialName" label="物料名称"></el-table-column>
          <el-table-column prop="fspecification" label="物料规格"></el-table-column>
          <el-table-column prop="fstockName" label="仓库">

          </el-table-column>
          <el-table-column prop="flot" label="批次"></el-table-column>
          <el-table-column prop="fqty" label="重量" align="right" width="60"></el-table-column>
        </el-table>
        <div style="display: flex; justify-content: center; margin-top: 10px">
          <el-button type="success" @click="dataToMaterial">添加</el-button>
          <el-button @click="materialShow = false" type="info">关闭</el-button>
        </div>
      </el-dialog>
      <el-table :data="transferList"  style="width: 100%" height="calc(200vh - 480px)">
        <el-table-column label="No." width="60" align="right" type="index"></el-table-column>
        <el-table-column prop="materialName" label="物料名称" min-width="180px"></el-table-column>
        <el-table-column prop="materialNo" label="物料编码" min-width="150px"></el-table-column>
        <el-table-column prop="specification" label="规格" min-width="130px"></el-table-column>
        <el-table-column prop="batchNo" label="批次" min-width="120px"></el-table-column>
        <el-table-column prop="fqty" label="总重" min-width="80px" align="right">
          <template #default="scope">
            {{ scope.row.fqty? Number(scope.row.fqty.toFixed(6)): scope.row.fqty }}
          </template>
        </el-table-column>
        <el-table-column prop="stockName" label="仓库" min-width="180px">
        </el-table-column>
        <el-table-column prop="locationNo" label="仓位" width="80px"></el-table-column>
        <el-table-column label="调拨至仓库" width="160px">
          <template slot-scope="scope">
            <el-select v-model="scope.row.toStockNo" clearable placeholder="请选择仓库"  size="small">
              <el-option  v-for="item in toStockList" :key="item.stockNo" :label="item.stockName" :value="item.stockNo + ',' + item.stockName"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="调拨至仓位" width="160px">
          <template #default="scope">
            <el-select v-model="scope.row.toLocationNo" clearable placeholder="请选择仓位" size="small">
              <el-option v-for="item in toLocationList" :key="item.locationNo" :label="item.locationName" :value="item.locationNo"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="transferCount" label="调拨数量" min-width="180px">
          <template slot-scope="scope">
            <el-input v-model="scope.row.transferCount" placeholder="请输入调拨数量"  type="number"></el-input>
          </template>

        </el-table-column>
        <el-table-column label="操作" min-width="200px" align="left" fixed="right">
          <template slot-scope="scope">
<!--            <el-button type="text" style="color: #67c23a" icon="el-icon-check" @click="saveDetail(scope.row)" v-if="form.status !== 'audit'">保存</el-button>-->
<!--            <el-button type="text" style="color: #409EFF" icon="el-icon-view" @click="getMaterialBoxList(scope.row.id)">查看</el-button>-->
            <el-button type="text" style="color: #ff0000" icon="el-icon-delete" @click="deleteMaterial(scope.$index,scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
			<div slot="footer" class="dialog-footer">
				<el-button :size="size" :loading="loading" type="primary" @click="submit" >
					<span v-if="!loading">{{$t('system.createTransfer')}}</span>
					<span v-else>{{$t('system.submitting')}}</span>
				</el-button>
				<el-button :size="size" @click="closeForm">{{$t('system.cancel')}}</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import { add,
  getMaterialFromStock,
  createTransfer} from '@/api/app/transfer'
import { list} from '@/api/app/stocklist'
import {getMaterialByKey} from '@/api/app/material'

export default {
  inject:['reload'],
	name:'transferadd',
	components: {
	   	   
	},
	props: {
		show: {
			type: Boolean,
			default: false
		},
		size: {
			type: String,
			default: 'small'
		},
		querys:{
			type:Object,
		},
	},
	data(){
		return {
      dialog:{},
			form: {},
      initial:{},
			loading:false,
			rules: {},
      stockList:[],
      toStockList:[],
      locationList:[],
      toLocationList:[],
      materialShow:false,
      dataList:[],
      materialList:[],
      transferList:[],//调拨集合
      materialNo:'',
      batchNo:'',
      multipleSelection: [],
      materialListLoading: false
		}
	},
	watch:{
		show(val){
			if(val){
			}
		}
	},
	methods: {

    deleteMaterial(index, row){
      this.transferList = this.transferList.filter(item => item !== row)
    },

    //添加物料到调拨列表
     dataToMaterial() {
       if (this.multipleSelection.length === 0) {
         ElMessage.error('请选择物料！')
         return
       }
       this.materialShow = false
       this.multipleSelection.forEach(value => {
          this.transferList.push({
            materialNo:value.fmaterialNumber,
            materialName:value.fmaterialName,
            specification:value.fspecification,
            batchNo:value.flot,
            unit:value.funit,
            fqty:value.fqty,
            stockNo:value.fstockNumber,
            stockName:value.fstockName,
            produceDate:value.fproduceDate,
            expiryDate:value.fexpiryDate,
            ownerName:value.FOwnerName
          })
       })

    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    /**
     *根据物料编码和批次查询及时库存物料
     */
    getMaterial(){
      this.materialListLoading = true
      try {
        getMaterialFromStock({
          materialNo: this.materialNo,
          batchNo: this.batchNo,
          stockNo: this.form.stockNo,
          locationNo: this.form.locationNo
        }).then(res => {
          this.dataList = res.dataList
        })
        if (this.dataList.length === 0) {
          ElMessage.warning('未查询到符合条件的物料!')
        }
      } finally {
        this.materialListLoading = false
      }
    },
    /**
     * 获取物料信息
     * @param val
     */
    getMaterialStockList(val){
      if (val.length < 5) {
        this.materialList = []
        return
      }
      if (!val) {
        this.materialList = []
        return
      }
      try {
        getMaterialByKey({key:val}).then(res => {
          this.materialList = res.data.data.data
        })

      } finally {

      }
    },
    //打开新增物料选项
    openShow() {
        this.materialShow = true
        this.materialList = []
        this.materialNo ='',
        this.batchNo = '',
        this.dataList = []
    },
    //获取仓库
     getStock(){
       list().then(res => {
         this.stockList = res.data
         this.toStockList = res.data
       })

    },
		open(){
		  if(this.querys){
		  }
		},
    /**
     * 生成调拨单
     */
		submit(){
      if (this.transferList === null || this.transferList.length === 0){
        return;
      }
      this.$confirm('是否确认生成调拨单',{
        confirmButtonText:'确定',
        cancelButtonText:'取消'
      }).then(() =>{
        var b = true;
        this.transferList.filter(item => {
           b = item.hasOwnProperty('transferCount');

        })
        if (b === false){
          this.$message.warning('请输入调拨数量')
          return;
        }
        createTransfer({data : this.transferList,remark : this.form.remark}).then(res =>{
          if (res.data.res){
            this.$message.success('保存成功')
            this.closeForm()
            this.reload()
          } else {
            this.$message.warning('保存失败')
            this.closeForm()
          }
        })

      }).catch(()=>{

      })

		},
		closeForm(){
			this.$emit('update:show', false)
			this.loading = false
			if (this.$refs['form']!==undefined) {
				this.$refs['form'].resetFields()
			}
      this.reload()
		},
	},
  mounted() {
    this.getStock()
  }
}
</script>
<style scoped lang="scss">
@import '@/assets/scss/common.scss';
</style>
